<table class="example-table" cdk-table editable [dataSource]="dataSource">
  <!--
    This edit lens is specified outside of the cell and must explicitly declare
    its context. It could be reused in multiple cells.
  -->
  <ng-template #weightEdit let-element>
    <div style="background-color: white;">
      <form #f="ngForm"
          cdkEditControl
          (ngSubmit)="onSubmitWeight(element, f)"
          [cdkEditControlPreservedFormValue]="preservedWeightValues.get(element)"
          (cdkEditControlPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
        Edit b:
        <input type="number" [ngModel]="element.weight" name="weight" required>
        <br>
        <button type="submit">Confirm</button>
        <button cdkEditRevert cdkEditClose>Revert and close</button>
      </form>
    </div>
  </ng-template>

  <!-- Position Column -->
  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"
        [cdkPopoverEdit]="nameEdit">
      {{element.name}}
      
      <!-- This edit is defined in the cell and can implicitly access element -->
      <ng-template #nameEdit>
        <div style="background-color: white;">
          <form #f="ngForm"
              cdkEditControl
              (ngSubmit)="onSubmitName(element, f)"
              [cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
              (cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
            Edit a:
            <input [ngModel]="element.name" name="name" required>
            <br>
            <button type="submit">Confirm</button>
            <button cdkEditRevert>Revert</button>
            <button cdkEditClose>Close</button>
          </form>
        </div>
      </ng-template>

      <span *cdkRowHoverContent>
        <button cdkEditOpen>Edit</button>
      </span>
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"
        [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
      {{element.weight}}
      
      <span *cdkRowHoverContent>
        <button cdkEditOpen>Edit</button>
      </span>
    </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>
